<template>
  <div>
    <h2>问题管理</h2>
    <div class="operatingBox">
      <div class="operating">
        <el-button
          type="success"
          icon="el-icon-plus"
          size="small"
          @click="addCustomer"
          >新增</el-button
        >
      </div>
      <div class="operating">
        <el-input
          placeholder="请输入内容"
          v-model="input1"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchQue"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="formTable">
      <template>
        <el-table
          ref="multipleTable"
          :data="questionData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            prop="type"
            label="类型"
            width="150"
            style="color: blue"
          >
            <template slot-scope="scope">
              {{
                scope.row.type == 0
                  ? "常见问题"
                  : scope.row.type == 1
                  ? "专业问题"
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="280">
          </el-table-column>
          <el-table-column prop="label" label="标签" width="150">
          </el-table-column>
          <el-table-column prop="creator" label="创建人" width="150">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="200">
          </el-table-column>
          <el-table-column prop="status" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag
                disable-transitions
                type="danger"
                v-if="scope.row.status == 0"
                >新客服</el-tag
              >
              <el-tag
                disable-transitions
                type="warning"
                v-if="scope.row.status == 1"
                >处理中</el-tag
              >
              <el-tag
                disable-transitions
                type="success"
                v-if="scope.row.status == 2"
                >已处理</el-tag
              >
              <el-tag
                disable-transitions
                type="info"
                v-if="scope.row.status == 3"
                >已取消</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            prop="operation"
            label="操作"
            width="300"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit-outline"
                size="mini"
                @click="changeQuestion(scope.row)"
                :disabled="scope.row.status==3"
                >修改</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-close"
                size="mini"
                @click="deleteQuestion(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 分页器 -->
    <Pagination
      :total="total"
      :pageSize="pageSize"
      @getPagination="getPagination"
    ></Pagination>
  </div>
</template>

<script>
import { getQuesApi, delQue, findQue } from "@/api/customer";
import Pagination from "@/components/Pagination";
export default {
  name: "cusManage",
  components: {
    Pagination,
  },
  data() {
    return {
      input1: "", //搜索框输入内容
      questionData: [
        {
          creator: "盖茨",
          createTime: "",
          description: "", //33号技师态度差
          id: 1,
          label: "", //差评
          solution: "", //思想 教育
          status: 1,
          title: "",
          type: 1,
          updateTime: "",
          userId: 1,
        },
      ],
      total: 0,
      pageSize: 0,
      pageNum: 0,
    };
  },
  created() {
    //获取列表---------------------
    console.log("2222222222", this.pageSize);
    this.getQuestion(1,8);
  },
  methods: {
    //获取列表接口-----------------------------
    async getQuestion(currentPage, pageSize) {
      let res = await getQuesApi({ currentPage, pageSize });
      console.log("获取问题列表接口------", res.data);
      if (res.data.code === 200) {
        this.questionData = res.data.data.list;
          //页码
        this.total= res.data.data.total;
        this.pageSize= res.data.data.pageSize;
      }
    },
    //新增-----------------------------------------
    addCustomer() {
      this.$router.push("/customer/addQuestion");
    },

    //修改编辑---------------------------------------
    changeQuestion(row) {
      console.log(row.label);
      this.$router.push({
        path: "/customer/changeQue",
        query: {
          type: row.type,
          title: row.title,
          status: row.status,
          label: row.label,
          description: row.description,
          id: row.id,
        },
      });
    },

    //查找方法----------------------------
    searchQue() {
      this.findQueByTitle(1, 8, this.input1);
    },
    //查找接口-------------------------------
    async findQueByTitle(currentPage, pageSize, title) {
      let res = await findQue({ currentPage, pageSize, title });
      console.log(res.data);
      if (res.data.code == 200) {
        this.questionData = res.data.data.list;
        //分页
        this.total = res.data.data.total;
        this.pageSize = res.data.data.pageSize;
      }
    },
    //删除-----------------------------------
    deleteQuestion(row) {
      console.log(row.id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //删除操作----------------------------------------------------
          this.deleteQue(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除接口--------------------------------
    async deleteQue(id) {
      let res = await delQue(id);
      console.log("删除接口-----", res.data);
      if (res.data.code == 200) {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        //更新页面
        this.getQuestion(1, 8);
      }
    },
    //分页-------------------------------------
    getPagination(page) {
      console.log("----", page);
      this.currentPage = page;
      this.getQuestion(this.currentPage, this.pageSize);
    },
  },
};
</script>
<style lang="less" scoped>
h2 {
  padding: 15px;
}
.operatingBox {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}
.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}
.el-input {
  width: 200px;
}
.formTable {
  margin-left: 10px;
  margin-right: 10px;
}
.el-button {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: 700;
  font-size: 100%;
  padding: 6px;
  border-radius: 0.25em;
}
</style>
